<template>
  <div class="permission-test">
    <h2>权限测试页面</h2>

    <div class="user-info">
      <h3>当前用户信息</h3>
      <p v-if="currentUser">
        <strong>账号:</strong> {{ currentUser.admin_account }}<br>
        <strong>姓名:</strong> {{ currentUser.admin_name }}<br>
        <strong>角色:</strong> {{ currentUser.admin_role === 2 ? '超级管理员' : '普通管理员' }}<br>
        <strong>ID:</strong> {{ currentUser.admin_id }}
      </p>
      <p v-else>加载中...</p>
    </div>

    <div class="permission-test">
      <h3>权限测试</h3>
      <p><strong>是否为超级管理员:</strong> {{ isSuperAdmin ? '是' : '否' }}</p>
      <p><strong>可以访问管理员管理:</strong> {{ isSuperAdmin ? '是' : '否' }}</p>
    </div>

    <div class="actions">
      <el-button type="primary" @click="goToAdminManagement" :disabled="!isSuperAdmin">
        进入管理员管理
      </el-button>
      <el-button @click="refreshUserInfo">刷新用户信息</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getCurrentUser } from '@/api/admin'

const router = useRouter()

// 当前用户信息
const currentUser = ref<any>(null)

// 权限控制
const isSuperAdmin = computed(() => {
  return currentUser.value?.admin_role === 2; // 2表示超级管理员
})

// 获取当前用户信息
const loadCurrentUser = async () => {
  try {
    const response = await getCurrentUser();
    if (response.code === 200) {
      currentUser.value = response.data;
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
}

// 刷新用户信息
const refreshUserInfo = async () => {
  await loadCurrentUser();
}

// 进入管理员管理
const goToAdminManagement = () => {
  if (isSuperAdmin.value) {
    router.push('/main/admin');
  } else {
    ElMessage.warning('权限不足，需要超级管理员权限');
  }
}

// 页面初始化
onMounted(async () => {
  await loadCurrentUser();
})
</script>

<style scoped>
.permission-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.user-info, .permission-test {
  background: #f5f5f5;
  padding: 20px;
  margin: 20px 0;
  border-radius: 8px;
}

.actions {
  margin-top: 20px;
}

.actions .el-button {
  margin-right: 10px;
}
</style>